<template>
	<view class="comment-container">
		<view class="comment-item">
			<image :src="item.userInfo ? item.userInfo.avator : '/common/images/avator.gif'" mode="aspectFill"
				class="avatar" @click="goUser(item.userInfo.id)"></image>
			<view class="content">
				<view class="user-info">
					<view class="left">
						<view class="username">{{item.userInfo.nickname}}</view>
						<view class="louzhu" v-if="item.user_id == uid"> [楼主]</view>
					</view>
					<view class="time">{{item.create_time}}</view>
				</view>
				<view class="reply-ctn" v-if="item.parent_comment">
					{{item.parent_user.nickname}}
					<text class="louzhu" v-if="item.parent_user.id == uid"> [楼主]</text>
					:{{item.parent_comment}}
				</view>
				<view class="comment-text">{{item.comment}}</view>
			</view>
			<view class="interaction">
				<text class="floor">{{item.floor+'楼'}}</text>
				<view class="act">
					<view class="reply" @click="doReply(item)">回复</view>
					<view v-if="useUserStore().$state.id == uid || item.user_id == useUserStore().$state.id "
						class="del" @click="delComment(item.id)">删除</view>
				</view>
			</view>
		</view>


	</view>
</template>
<script setup>
	import {
		useUserStore
	} from '../../store/user'
	import {
		apiDelComment
	} from '@/api/apis'

	defineProps(['item', 'uid'])
	const emits = defineEmits(['doReply'])
	const doReply = (item) => {
		emits('doReply', item)
	}
	const goUser = (id) => {
		uni.navigateTo({
			url: '/pages/user/user?id=' + id
		})
	}
	const delComment = (id) => {
		uni.showModal({
			title: '温馨提示',
			content: '确定要删除该评论吗?',
			success: async res => {
				if (res.confirm) {
					await apiDelComment({
						id
					}).then(res => {
						uni.showToast({
							title: res.msg,
							icon: 'icon'
						})
					})
				}
			}
		})
	}
</script>
<style lang="scss" scoped>
	.comment-container {
		padding: 20rpx;
		background-color: #FFFFFF;

		.comment-item {
			margin-bottom: 30rpx;
			align-items: flex-start;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #f1f1f1;

			&:last-child {
				margin-bottom: 0;
				padding-bottom: 0;
				border-bottom: none;
			}

			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 20rpx;
				background-color: #eee;
				/* 占位颜色 */
			}

			.content {
				flex: 1;
				padding-right: 20rpx;

				.reply-ctn {
					background-color: #eee;
					border-radius: 10rpx;
					padding: 5rpx 20rpx;
					font-size: 24rpx;
					line-height: 60rpx;
					color: #666;
					display: inline-block;
				}

				.user-info {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 10rpx;

					.left {
						display: flex;
						align-items: center;

						.louzhu {
							color: $theme-color;
							font-size: 18rpx;
						}

						.username {
							font-size: 28rpx;
							font-weight: bold;
							color: #333;
							margin-right: 10rpx;
						}

					}

					.time {
						font-size: 24rpx;
						color: #999;
					}
				}

				.comment-text {
					font-size: 28rpx;
					line-height: 1.6;
					color: #333;
				}
			}

			.interaction {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				min-width: 100rpx;

				.floor,
				.reply,
				.del {
					font-size: 24rpx;
					height: 60rpx;
					line-height: 60rpx;
					color: #666;
				}

				.act {
					display: flex;

					.del {
						margin-left: 20rpx;
					}
				}
			}
		}
	}
</style>